﻿@page "/toggle-button"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    ToggleButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Radzen Blazor <strong>ToggleButton</strong> is a button that changes its appearance or color when activated and returns to its original state when deactivated.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a toggle button with two-way value binding, customizable active state appearance using <code>ToggleShade</code> and <code>ToggleStyle</code>, multiple variants (filled/flat/outlined/text), content options (text/icons/images) with <code>ToggleIcon</code> for state changes, different sizes (ExtraSmall/Small/Medium/Large), and disabled states—perfect for filtering and category selection.
</RadzenText>

<RadzenText Anchor="toggle-button#bound-toggle-button" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Bound ToggleButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Binding Radzen ToggleButton's Value.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonBound">
    <ToggleButtonBound />
</RadzenExample>

<RadzenText Anchor="toggle-button#shade" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    ToggleButton Shade
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ToggleButtonShade</code> to define the shade of the ToggleButton's toggled active state.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonShade">
    <ToggleButtonShade />
</RadzenExample>

<RadzenText Anchor="toggle-button#style" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    ToggleButton Style
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ToggleButtonStyle</code> to define the style of the ToggleButton's toggled active state.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonStyle">
    <ToggleButtonStyle />
</RadzenExample>

<RadzenText Anchor="toggle-button#variants" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    ToggleButton Variants
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant</code> for different button variants.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonVariants">
    <ToggleButtonVariants />
</RadzenExample>

<RadzenText Anchor="toggle-button#content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Content in ToggleButtons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Text, icons and images can be added to a button. Use <code>ToggleIcon</code> in case you need to change the icon when the button is toggled.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonContent">
    <ToggleButtonContent />
</RadzenExample>

<RadzenText Anchor="toggle-button#sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    ToggleButton Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Size</code> property to set button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonSizes">
    <ToggleButtonSizes />
</RadzenExample>

<RadzenText Anchor="toggle-button#disabled" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Disabled ToggleButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable a button.
</RadzenText>
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonDisabled">
    <ToggleButtonDisabled />
</RadzenExample>

<RadzenText Anchor="toggle-button#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor ToggleButton component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a ToggleButton." },
        new KeyboardShortcut { Key = "Enter", Action = "Click and toggle the focused ToggleButton." },
        new KeyboardShortcut { Key = "Space", Action = "Click and toggle the focused ToggleButton." }
    };
}